<template>
  <div id="right2"> 
       <div class="rightChart2"  style="width:430px;height:230px;" ref="rightChart2">
          <!-- <dv-scroll-board :config="config" style="width:400px;height:230px" /> -->
       </div>
  </div>
</template>

<script type="text/javascript">
   import * as echarts from 'echarts'
export default {
  name: "",
  components: {
  },
  props:['echartData'],
  data() {
    return { 
      projectData:[]
    }
  },
  mounted() { 
    console.log(this.echartData,1221)
      this.$nextTick(_=>{
        let xData=[]
        let yData1=[] 
        let yData2=[] 
        this.echartData.forEach(v=>{
          xData.push(v.cityName)
          yData1.push(v.upCount)  
          yData2.push(v.downCount)  
        }) 
        this.draw(xData,yData1,yData2);
      })
  },
  methods:{
    draw(xData, yData1, yData2) {
      console.log(yData1, yData2)
      this.rightChart2 = echarts.init(this.$refs.rightChart2)
      this.option = {
        dataZoom: [
          { // 第一个 dataZoom 组件
            type: 'inside',
            xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
            throttle: 50,
            startValue: 0, // 数据窗口范围的起始数值index
            endValue: 5, // 数据窗口范围的结束数值index
          },
        ],
        legend: {
          data: ['上行件数', '下行件数'],
          right: '10%',
          // icon:'rect',
          height: '2px',
          textStyle: {
            color: '#fff',
          }
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '0',
          containLabel: true,
          top: '12%'
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            },
            // 文字斜着
            // rotate:45,
          },
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            type: [5, 10],
            dashOffset: 5,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
            }
          },
          axisTick: { //y轴刻度线去掉
            show: false
          },
        },
        series: [
          {
            name: '上行件数',
            type: 'line',
            showBackground: true,
            smooth: true,
            backgroundStyle: {
              color: '#061D32FF'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#3caab7FF'
                }, {
                  offset: 1,
                  color: '#13254314'
                }]),
              }
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: yData1
          },
          {
            name: '下行件数',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00aeffFF'
                }, {
                  offset: 1,
                  color: '#13254314'
                }]),
              }
            },
            data: yData2
          },
        ]
      }
      this.rightChart2.setOption(this.option)
      setInterval(() => {
        if (this.option.dataZoom[0].endValue == yData1.length - 1) {
          this.option.dataZoom[0].endValue = 5
          this.option.dataZoom[0].startValue = 0
        } else {
          this.option.dataZoom[0].endValue =
            this.option.dataZoom[0].endValue + 1
          this.option.dataZoom[0].startValue =
            this.option.dataZoom[0].startValue + 1
        } 
        // xData.push(xData.shift())
        // yData1.push(yData1.shift())
        // yData2.push(yData2.shift())
        // this.option.xAxis.data= x
        // console.log(x)
        // console.log(xData)
        // console.log(this.option)
        
        setTimeout(_=>{
          // this.rightChart2.clear();
          this.rightChart2.setOption(this.option)
        },200)
      }, 2000)
    },
   
  }
}
</script>

<style lang="scss" scoped>
   
</style>